<template>
  <div class="safe-calendar-page" :class="!isBlackTheme ? 'white-theme' : ''">
    <h1 class="title">连续安全运营 896天</h1>
    <div class="calendar-grid" v-if="monthList.length">
      <div v-for="(month, idx) in monthList" :key="idx" class="calendar-item">
        <el-calendar :model-value="month">
          <template #date-cell="{ data }">
            <div
              v-if="data?.type === 'current-month'"
              :class="getDayClass(data)"
              class="date-cell"
            >
              {{ data?.day?.split("-")[2] ?? "" }}
            </div>
            <div v-else></div>
          </template>
        </el-calendar>
      </div>
    </div>
    <div class="legend">
      <span class="legend-item safe"></span>
      <span class="pr-[20px]">安全日</span>
      <span class="legend-item normal"></span>
      <span class="pr-[20px]">一般安全事故</span>
      <span class="legend-item danger"></span>
      <span class="pr-[20px]">休业安全事故</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";

const props = defineProps({
  isBlackTheme: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});
const { isBlackTheme } = toRefs(props);

// 生成今年的12个月份
const now = new Date();
const year = now.getFullYear();
const monthList = ref(getMonth());

onMounted(() => {});

function getMonth() {
  const fileList = [];
  for (let i = 0; i < 12; i++) {
    fileList.push(new Date(year, i, 1));
  }
  return fileList;
}

// 假设有事故的日期（可根据实际数据替换）
const normalAccidents = ref([`${year}-03-15`, `${year}-07-10`]);
const dangerAccidents = ref([
  `${year}-05-20`,
  `${year}-09-05`,
  `${year}-12-25`,
]);

// 根据日期返回样式
function getDayClass(data: any) {
  if (dayjs(data.day).isAfter(dayjs())) {
    return "future";
  }
  if (data.type === "current-month" && !dayjs(data.day).isAfter(dayjs())) {
    if (dangerAccidents.value.includes(data.day)) return "danger";
    if (normalAccidents.value.includes(data.day)) return "normal";
    return "safe";
  }

  return "";
}
</script>

<style scoped lang="scss">
.safe-calendar-page {
  //   background: #0a2250;
  max-height: 100%;
  color: #fff;
  padding: 0px;
  overflow-y: auto;
}
.title {
  text-align: center;
  font-size: 32px;
  margin-bottom: 18px;
  font-family: YOUSHE;
  font-weight: 400;
  margin-top: 0px;
}
.calendar-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 10px;
  margin-bottom: 0px;
}
.calendar-item {
  width: 200px;
  background: transparent;
  //   border: 1px solid #333;
  background-color: rgba(95, 156, 268, 0.12);
  border-radius: 20px;
}
.el-calendar {
  //   background: #113983;
  //   background: radial-gradient(#01102e, transparent);
  background-color: transparent;
  --el-calendar-cell-width: 23px;
  --el-calendar-cell-height: 23px;
}

:deep(.el-calendar) {
  font-family: DINPro;
  .el-calendar-table td.is-selected {
    background-color: transparent !important;
  }
  .el-calendar-table .el-calendar-day {
    padding: 0;
    display: flex;
    align-items: center;
  }
  --el-calendar-border: none;
  .el-calendar-table thead th {
    color: #4e84f1;
    font-weight: 600;
    padding: 0px 0 5px;
    font-size: 14px;
  }
  .el-calendar__header {
    // padding-bottom: 0px !important;
    font-size: 17px;
    padding: 10px 20px 3px !important;
  }
  .el-calendar__body {
    padding: 3px 10px 10px;

    td {
      border: none !important;
    }
  }
  .el-calendar-table .el-calendar-day:hover {
    background: #1252f8 !important;
    .date-cell {
      background: #1252f8 !important;
      color: #fff !important;
    }
  }
  .el-calendar__button-group {
    display: none;
  }
}
.date-cell {
  width: 96%;
  height: 96%;
  line-height: 23px;
  margin: 0 auto;
  text-align: center;
  font-size: 14px;
  transition: background 0.2s;
  font-family: DINPro;
}
.safe {
  background: #7fffd4;
  color: #222;
}
.normal {
  background: #ffd580;
  color: #222;
}
.danger {
  background: #ff4d4f;
  color: #fff;
}
.future {
  font-weight: 400 !important;
  color: #999 !important;
}
.legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  font-size: 17px;
  //   font-weight: 600;
}
.legend-item {
  display: inline-block;
  width: 32px;
  height: 16px;
  border-radius: 4px;
  margin-right: 0px;
  vertical-align: middle;
}
.legend-item.safe {
  background: #7fffd4;
}
.legend-item.normal {
  background: #ffd580;
}
.legend-item.danger {
  background: #ff4d4f;
}

.white-theme {
  padding: 0 10px;
  .title {
    color: #333;
  }
  :deep(.calendar-item) {
    border: 1px solid #c0c4cc;
    border-radius: 8px;
    background-color: #fff !important;
  }
  :deep(.el-calendar-table thead th) {
    color: #333;
    font-family: DINLight;
    font-weight: 400;
  }
  :deep(.el-calendar__header) {
    color: #333;
    background-color: #e6eaf1b2;
    padding: 6px 20px 5px !important;
    margin-bottom: 3px;
  }
  :deep(.el-calendar) {
    .date-cell {
      font-family: DINLight;
    }
  }
  .legend {
    color: #333;
    font-size: 14px;
  }
}
</style>
